<html>
    <head>
        <title>百分比进度条</title>
    </head>
    <body>
        <h1>JavaScript 百分比进度条</h1>

        <div id="myProgress">
            <div id="myBar" style="width: 100%;">100%</div>
        </div>

        <br>
        <button onclick="move()">点我</button>
        <style>
            #myProgress {
            width: 100%;
            background-color: #ddd;
            }
            
            #myBar {
            width: 10%;
            height: 30px;
            background-color: #4CAF50;
            text-align: center;
            line-height: 30px;
            color: white;
            }
        </style>

        <script>
            function move() {
            var elem = document.getElementById("myBar");   
            var width = 10;
            var id = setInterval(frame, 10);
            function frame() {
                if (width >= 100) {
                clearInterval(id);
                } else {
                width++; 
                elem.style.width = width + '%'; 
                elem.innerHTML = width * 1  + '%';
                }
            }
            }
        </script>
    </body>
</html>